<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * 定时器：
    *   定时器内部 this指向window
    *
    *   setInterval 间隔时间执行
    *       接收两个参数：
    *       1.回调函数 回调函数接收的参数 不定个数看情况传入 可以使用arguments
    *       2.延时 delay 每次都间隔这个时间执行，直到手动停止这个定时器
    *   返回值：返回页面唯一的定时器id，数字形式的编号
    *
    *   setTimeout 延迟到某个时间执行
    *       接收两个参数：
    *       1.回调函数
    *       2.延时 delay 延时到这个时间执行，只执行一次
    *   返回值：返回页面唯一的定时器id，数字形式的编号
    *
    *   两个api都可以停止
    *   clearInterval(定时器id) 接收一个参数 定时器返回的id编号
    *
    *   clearTimeout(定时器id) 接收一个参数 定时器返回的id编号
    *
    *
    * */

    setTimeout(function (){//如果要给这个回调函数传参数，不能在这个括号里面传参数，要在设置的延时之后传
        console.log(arguments);
    },1000,1,2)//回调函数的参数要从这里传入，写在延时之后

    setTimeout(function (){//如果要给这个回调函数传参数，不能在这个括号里面传参数，要在设置的延时之后传
        console.log(arguments);
    },1000,...[1,2,3])//回调函数的参数传入一个数组 用点点点进行解构赋值给回调函数

    //假如我们要执行一个延时定时器 一秒钟之后执行console.log回调函数 打印传入回调函数的参数 要这样写
    setTimeout(console.log,1000,2,3)//回调函数 1000ms 回调函数的两个参数2，3

    setTimeout(function (){//这里setTimeout就像是一个登记员，登记1000ms之后，让浏览器去执行这个函数
        console.log(this)//谁在调用这个回调函数 没人调用 就指向浏览器window
    },1000)

    let obj = {
        fn:function (){
            console.log(this)
        },
        fn2:function (){
            setTimeout(this.fn,1000) //在定时器内部 this一般指向window
        }
    }
    setTimeout(obj.fn,1000)//这里的函数打印的this指向谁？ 在定时器里面 没有指定修改的情况下 传入的回调函数 this指向window
    //上面56这一行代码是谁执行 是setTimeout执行 而不是obj.fn执行，obj.fn只是传入setTimeout的参数之一回调函数
    //可以理解成在setTimeout内部 let f = obj.fn 然后f()

    //如果要将setTimeout里面回调函数的this指向obj 可以bind强行绑定到obj
    setTimeout(obj.fn.bind(obj),1000)

    obj.fn2()//obj.fn2就是上面对象里的fn2属性，属性值是一个函数 函数内部是一个定时器 定时器的this一般指向window 所以这里this指向window

    let obj1 = {
        fn:function (){
            console.log(this)
        },
        fn2:function (){
            setTimeout(this.fn.bind(obj1),1000) //在定时器内部 this一般指向window 但是我们可以有两种方式修改this指向 1使用bind
        },
        fn3:function (){
            setTimeout(() => this.fn(),1000) //在定时器内部 this一般指向window 但是我们可以有两种方式修改this指向 2使用箭头函数
            //箭头函数this 强行绑定到上下文
        },
    }
    obj1.fn2()
    obj1.fn3()

</script>
</body>
</html>